import { defineComponent, PropType } from 'vue';
import { Table, TableColumn, Pagination, Divider, Button, Popconfirm, Popover, TableProps } from 'ant-design-vue';
import { OpButton, OpButtonKey, Page, sortType } from '@/domain/common/types/page';

import { Key } from 'ant-design-vue/lib/_util/type';

export default defineComponent({
  name: 'Tablelist',
  props: {
    tableList: {
      type: Object as PropType<Partial<Array<any>>>,
      default: () => {}
    },
    paging: {
      type: Object as PropType<Partial<Page>>,
      default: () => {}
    },

    columnlist: {
      type: Object as PropType<Partial<Array<any>>>,
      default: () => {}
    },
    sizeChange: {
      type: Function,
      default: () => {}
    },
    opGroupCallBack: {
      type: Function,
      default: () => {}
    },
    rowKey: {
      type: String,
      default: 'id'
    },
    cellClick: {
      type: Function,
      default: () => {}
    },
    getSelectRowsCallBack: {
      type: Function,
      default: () => {}
    },
    loading: {
      type: Boolean,
      default: false
    },
    isOpGroup: { type: Boolean, default: true },
    isRowSelection: { type: Boolean, default: false }
  },
  emits: ['tableChange'],
  setup(props, { emit }) {
    //分页状态改变
    const sizeChange = (cur: number, pageSize: number) => {
      props.sizeChange(cur, pageSize);
    };

    //回调用
    const opGroupCallBack = (key: OpButtonKey, node: any) => {
      props.opGroupCallBack(key, node);
    };

    const rowSelection = {
      onChange: (selectedRowKeys: Key[], selectedRows: any) => {
        props.getSelectRowsCallBack(selectedRowKeys, selectedRows);
      }
    };
    // 表格change
    const tableChange: TableProps['onChange'] = (_pag, _filter, sorter: any) => {
      console.log('表格change', sorter.field, sorter.order);
      switch (sorter.order) {
        case sortType.asce:
          emit('tableChange', 'sort', `${sorter.field},asce`);
          break;
        case sortType.desc:
          emit('tableChange', 'sort', `${sorter.field},desc`);
          break;
        default:
          emit('tableChange', 'sort');
      }
    };
    return () => (
      <div class="mb-8 w-full">
        <Table
          dataSource={props.tableList}
          rowSelection={props.isRowSelection ? rowSelection : null!}
          locale={{ emptyText: '暂无数据' } as any}
          loading={props.loading}
          rowKey={props.rowKey}
          pagination={false}
          bordered
          scroll={{ x: true }}
          onChange={tableChange}
        >
          {props.columnlist?.map((node, idx) => {
            return (
              <TableColumn
                title={node.label}
                dataIndex={node.prop}
                customRender={(param: { text: string; record: any; column: { [key: string]: string | number } }) => {
                  const text = param.text === undefined ? '' : param.text;
                  if (node.limit) {
                    return <span title={text}>{(text as string).length > node.limit ? (text as string).slice(0, node.limit) + '...' : (text as string)}</span>;
                  } else if (node.click && node.click.status) {
                    return (
                      <a
                        class={' text-blue-450'}
                        onClick={() => {
                          props.cellClick(node.prop, param.record, param.record[node.click.relevant]);
                        }}
                      >
                        {text}
                        {node.rote && '%'}
                      </a>
                    );
                  } else {
                    return text + (node.rote ? '%' : '');
                  }
                }}
                // sorter={node.sortable ? (a: any, b: any) => a[node.prop] - b[node.prop] : node.sortable}
                sorter={node.sortable ? true : false}
              ></TableColumn>
            );
          })}
          {props.isOpGroup ? (
            <TableColumn
              title={'操作'}
              dataIndex={'opGroup'}
              customRender={(opt) => {
                const { record } = opt as { record: { id: string; opGroup: Array<OpButton> } };
                if (!record.opGroup) {
                  return <></>;
                }
                const rows = record.opGroup.map((val) => {
                  return (
                    <span style={{ color: '#1890ff', margin: '0 8px 0 0' }}>
                      <Popconfirm
                        title={`确定${val.value}?`}
                        ok-text="是"
                        cancel-text="否"
                        onCancel={() => {}}
                        onConfirm={() => {
                          opGroupCallBack(val.key, record);
                        }}
                      >
                        {val.value}
                      </Popconfirm>
                    </span>
                  );
                });
                return {
                  children: rows
                };
              }}
            ></TableColumn>
          ) : null}
        </Table>
        <div class="text-right mt-5" style={{ display: 'flex', justifyContent: 'center' }}>
          <Pagination
            total={props.paging.total}
            current={props.paging.page}
            pageSize={props.paging.pageSize}
            showSizeChanger={false}
            showTotal={() => <div>共{props.paging.total}条</div>}
            onChange={sizeChange}
          ></Pagination>
        </div>
      </div>
    );
  }
});
